<template>
  <div class="login-box">
    <div>
      <div class="formInfomation" v-show="sees">
        <i class="el-icon-circle-close"></i>
        <p>
          <input type="text" v-model="name" placeholder="usernam" />
        </p>
        <p>
          <input type="text" v-model="mobile" placeholder="mobile" />
        </p>
        <p>
          <input type="text" v-model="conignee_address" placeholder="address" />
        </p>
        <!-- <input type="text"  placeholder="modify_time" /> -->
        <p>
          <input type="text" v-model="id" placeholder="输入要操作的id" />
        </p>
        <p>
          <button @click="create">增加人员</button>
          <button @click="change">修改信息</button>
          <button @click="seachInfo">搜索</button>
          <button @click="delet">删除</button>
        </p>
      </div>
    </div>
    <!-- =================== -->
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="日期" width="150"> </el-table-column>
        <el-table-column prop="userName" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="consignee_address" label="住址" width="300">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
        </el-table-column>
        <el-table-column prop="modify_time" label="时间" width="200">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="200">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="seen()">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- ====================== -->
  </div>
</template>

<script>
import mock from "../mock/mock.js";
import * as dayjs from "dayjs";

export default {
  name: "mock",
  components: {
    mock,
  },
  data() {
    return {
      arr: [],
      tableData: [],
      name: "",
      mobile: "",
      conignee_address: "",
      modify_time: new Date(),
      id: "",
      sees: false,
    };
  },
  mounted() {
    this.data();
  },
  methods: {
    seen() {
      this.sees = true;
    },
    data() {
      this.$http.get("http://localhost:3001/uiData").then((res) => {
        // console.log(res.data);
        this.tableData = res.data;
        console.log(this.tableData);
         for (let i = 0; i < this.tableData.length; i++) {
          const a = dayjs(this.tableData[i].modify_time).format("YYYY-MM-DD HH:mm:ss");
          // console.log(dayjs(this.tableData[i].modify_time).format("YYYY-MM-DD HH:mm:ss"));
          this.tableData[i].modify_time = a;

        }
      });
    },
    create() {
      console.log(this.mobile);
      this.$http
        .get("http://localhost:3001/creat", {
          params: {
            userName: this.name,
            mobile: this.mobile,
            conignee_address: this.conignee_address,
            modify_time: this.modify_time,
          },
        })
        .then((res) => {
          console.log(res);
          this.data();
          this.sees = false;
        });
    },
    delet() {
      this.$http
        .get("http://localhost:3001/delete", {
          params: {
            id: this.id,
          },
        })
        .then((res) => {
          console.log(res);
          this.data();
          this.sees = false;
        });
    },
    seachInfo() {
      this.tableData = "";
      console.log(this.id);
      this.$http
        .get("http://localhost:3001/seachInfo", {
          params: {
            id: this.id,
            userName: this.name,
            mobile: this.mobile,
            conignee_address: this.conignee_address,
            modify_time: this.modify_time,
          },
        })
        .then((res) => {
          this.tableData = res.data;
          console.log(res);
          this.sees = false;
        });
    },
    change() {
      this.$http
        .get("http://localhost:3001/change", {
          params: {
            userName: this.name,
            mobile: this.mobile,
            conignee_address: this.conignee_address,
          },
        })
        .then((res) => {
          console.log(res);
          this.data();
          this.sees = false;
        });
    },
  },
};
</script>

<style  scoped>
i {
  position: absolute;
  right: 10px;
  top: 10px;
}
.login-box {
  height: 300px;
}
.formInfomation {
  border-radius: 10px;
  border: 1px red solid;
  position: absolute;
  left: 750px;
  z-index: 1;
  height: 200px;
  background-color: aqua;
  width: 300px;
}
.formInfomation > input {
  line-height: 20px;
  margin-top: 5px;
}
</style>